<template>
  <view class="registration-page">
    <view class="head-tab">
      <view class="fixed">
        <zb-tab-group v-model="payload.status" :list="tabs" color="white" @change="updateStatus" />
      </view>
    </view>
    <view class="registration-list">
      <view v-for="(item, index) in list" :key="item.id" class="item" @click="skip(item.id)">
        <view class="top">
          <view class="code">订单号：{{ item.orders.sn }}</view>
          <view :class="['status', 'status-' + item.status]">{{
            item.status_desc
          }}</view>
        </view>
        <view class="content">
          <view class="photo">
            <image class="img" :src="item.activity.image_text" mode="aspectFill"></image>
          </view>
          <view class="infos flex-1">
            <view class="name u-line-2">{{ item.activity.title }}</view>
            <view class="price mt10">￥{{ item.price }}</view>
          </view>
        </view>
        <view class="bottom">
          <view class="left">
            <countdown className="list-time" v-if="item.status === 0 && item.validity_desc && item.validity_desc.minutes != 0 && item.validity_desc.seconds != 0" :minutes="item.validity_desc.minutes" :seconds="item.validity_desc.seconds" />
            <text v-else-if="item.status == 1">开赛时间：{{ item.activity.start_time_desc }}</text>
          </view>

          <!-- 0-未支付， 1-待开赛 , 2-已完成, 3-已取消, 4- 已失效 -->
          <view class="right">
            <!-- item.activity.status 1 - 待报名, 2-报名中, 3-待开赛, 4-开赛中, 5-已结束, 0-下架  已开赛、已结束的活动不允许取消报名-->
            <view v-if="[0, 1].includes(item.status) && ![0, 4, 5].includes(item.activity.status)" class="btn btn-1" @click.stop="handleCancel(item.id, index)">取消报名  
            </view>
            <view v-if="[2, 3, 4].includes(item.status)" class="btn btn-1" @click.stop="handleDelete(item.id, index)">
              删除报名</view>
            <view v-if="[3, 4].includes(item.status) && [1, 2].includes(item.activity.status)" class="btn btn-1" @click.stop="handleReload(item, index)">重新报名
            </view>
            <view v-if="item.status === 0" class="btn btn-2" @click.stop="handlePayment(item.id, index)">去支付</view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="list.length === 0" class="no-data">
      <image class="icon" src="/home/static/imgs/empty-2.png"></image>
      <view class="title">暂无报名记录~</view>
    </view>
    <cancel-reason v-model="reasonShow" @confirm="handleReasonConfirm" ref="cancelReasonRef" />
    <!-- <u-action-sheet v-model="reasonShow"  :list="reasonList"  @click="renConfirm" @close="reasonShow = false" ></u-action-sheet> -->
  </view>
</template>

<script>
  import orderUtils from "@/utils/index.js";

  export default {
    data() {
      return {
        tabs: [{
            id: '',
            name: "全部"
          },
          {
            id: 0,
            name: "待支付"
          },
          {
            id: 1,
            name: "待开赛"
          },
          {
            id: 4,
            name: "已失效"
          },
          {
            id: 2,
            name: "已完成"
          },
        ],
        payload: {
          status: '',
          page: 1,
        },
        isLast: false,
        list: [],
        reasonList: [],
        reasonShow: false,
        reasonId: "",
        register_id: "",
        status:null
      };
    },
    onLoad() {
      this.getList();
    },
    methods: {
      // 取消报名选择原因后
      handleReasonConfirm(e) {
        this.reasonId = e;
        orderUtils.cancel(
          this, {
            register_id: this.register_id,
            reason_id: this.reasonId
          },
          () => {
            this.list[idx].status = 3;
            // this.upGetList()
          }
        );
      },
      renConfirm(e) {
        orderUtils.cancel(this, _id, () => {
          this.list[idx].status = 3;
        });
      },
      getList() {
        this.$api.activityGetRegisterListApi(this.payload).then((res) => {
          if (res.data.last_page == this.payload.page) {
            this.isLast = true;
          } else {
            this.isLast = false;
            this.payload.page++;
          }
          this.list = [...this.list, ...res.data.data];
          console.log("this.list--------", this.list, res.data.data);
        });
      },
      // 切换状态
      updateStatus() {
        console.log(this.payload.status);
        if (this.status === this.payload.status) return;
        this.payload.page = 1;
        this.isLast = false;
        this.list = [];
        this.getList()
      },
      // 状态渲染
      renderStatus(v) {
        let t = this.tabs.find((s) => s.id === v);
        return t?.name || "";
      },
      loadRes() {},
      // 取消报名
      handleCancel(_id, idx) {
        console.log("-------------------取消报名");
        this.reasonShow = true;
        this.register_id = _id;
      },
      // 删除报名
      handleDelete(_id, idx) {
        orderUtils.delete(this, _id, () => {
          this.list = this.list.filter((n) => n.id !== _id);
        });
      },
      // 重新报名
      handleReload(item, idx) {
        console.log(item);
        uni.showModal({
          content: "确定要重新报名？",
          confirmColor: '#05b196',
          success(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: `/home/match/detail?id=${item.activity_id}&register_id=${item.id}`,
              });
            }
          },
        });
      },
      // 支付
      handlePayment(_id, idx) {
        orderUtils.payment(this, _id, () => {
          this.upGetList();
        });
      },
      upGetList() {
        this.list = [];
        this.payload.page = 1;
        this.isLast = false;
        this.getList();
      },
      // 跳转
      skip(_id) {
        uni.navigateTo({
          url: "/home/mine/registrationDetails?id=" + _id,
        });
      },
    },
    onReachBottom() {
      // 底部加载
      if (this.isLast) return;
      this.getList();
    }
  };
</script>

<style lang="scss">
  .registration-page {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #f7f7f7;
    padding-bottom: env(safe-area-inset-bottom);

    .head-tab {
      height: 88rpx;

      .fixed {
        width: 100%;
        height: 88rpx;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }
    }

    

    .registration-list {
      overflow: hidden;

      .item {
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 30rpx;
        margin: 10rpx 0;

        .top {
          height: 74rpx;
          @include flex;
          box-shadow: 0 1px 0 #eee;

          .code {
            flex: 1;
            overflow: hidden;
            font-size: 26rpx;
            color: #333;
          }

          .status {
            font-size: 26rpx;
            color: #888888;

            &.status-0 {
              color: #ea1d1b;
            }

            &.status-1 {
              color: #05b196;
            }
          }
        }

        .content {
          padding: 24rpx 0;
          box-shadow: 0 1px 0 #eee;
          @include flex(row, flex-start, flex-start);

          .photo {
            width: 118rpx;
            min-width: 118rpx;
            height: 118rpx;
            overflow: hidden;
            border-radius: 8rpx;
            margin-right: 20rpx;

            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .infos {
            .name {
              font-size: 28rpx;
              color: #333333;
              font-weight: bold;
              line-height: 35rpx;
              height: 70rpx;
            }

            .type {
              font-size: 24rpx;
              color: #666666;
              line-height: 1.2;
              margin-top: 16rpx;
            }

            .price {
              // text-align: right;
            }
          }
        }

        .bottom {
          padding: 20rpx 0;
          @include flex;

          .left {
            flex: 1;
            overflow: hidden;
            font-size: 26rpx;
            color: #666;
          }

          .right {
            @include flex(row, center, flex-end);

            .btn {
              width: 176rpx;
              height: 60rpx;
              border-radius: 8rpx;
              @include flex;
              margin-left: 10rpx;
              font-size: 26rpx;
              box-sizing: border-box;

              &.btn-1 {
                border: 1px solid #aaa;
                color: #666666;
              }

              &.btn-2 {
                background-color: #05b196;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
</style>